<template>
  <div class="counter">
    <span class="iconfont icon-Sy_jianhao" @click="del" v-show="food.count>0"></span> 
    <input readonly="readonly" v-model="food.count" v-show="food.count>0"> 
    <span class="iconfont icon-Sy_jiahao" @click="add"></span>
  </div>
</template>

<script>

import Vue from 'vue'

export default {
  name: 'hello',
  props:{
    food:{
      type:Object
    }
  },
  data () {
    return {
      num: 0,
      isGray:false,
      isShow:false,
      foodlist:[]
    }
  },
  methods:{
    add() {
      if (!this.food.count) {
          Vue.set(this.food, 'count', 1);
        } else {
          this.food.count++;
        }
    },
    del() {
      if (this.food.count) {
          this.food.count--;
        }
    }
  },
  created() {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.counter{
  display: -webkit-flex; /* Safari */
  display: flex;
  position: absolute;
  right:20px;
  bottom:5px;
}
.counter input{
  flex:2;
  width:28px;
  text-align:center;
  outline:none;
  border:none;
  background-color:inherit;
  font-size:20px;
}
.counter .iconfont{
  font-size:26px;
  color:#ff4d4d;
}
.icon-Sy_jianhao{
  color:#bababa!important;
}
</style>
